<template>
  <NavbarPage title="">
    <van-overlay :show="show" @click="show = true">
      <div class="wrapper" @click.stop>
        <div class="block">
          <h3 style="color: rgb(87, 85, 85)">注册协议</h3>
          <div class="" style="margin:auto">
            <p style="color: rgb(71, 70, 70)">
              [审慎阅读]您在申请注册流程中点击同意前，应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：<span>1、与您约定免除或限制责任的条款；2、与您约定法律适用和管辖的条款；3、其他以粗体下划线标识的重要条款。</span>如您对协议有任何疑问，可向商城在线客服咨询。如您对协议有任何疑问，可向商城在线客服咨询。阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。
            </p>
            <input
              type="checkbox"
              class=""
            />同意勾选即表示您已阅读相关协议或其中任何条款约定。
            <a style="color: rgb(87, 85, 85)" href="#serviceArea" class=""
              >《注册协议》</a
            >
            <a style="color: rgb(87, 85, 85)" href="#serviceArea" class=""
              >《隐私政策》</a
            >
            <a style="color: rgb(87, 85, 85)" href="#serviceArea" class=""
              >《法律声明》</a
            >
          </div>
          <van-button class="btn1" @click="goto()" type="default"
            >取消</van-button
          >
          <van-button class="btn2" @click="show = false" type="danger"
            >同意并接受</van-button
          >
        </div>
      </div>
    </van-overlay>

    <h2>注册页面</h2>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="rules.username"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="rules.password"
      />
      <div style="margin: 16px">
        <van-button
          block
          type="info"
          style="background-color: #00a6aa"
          native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </NavbarPage>
</template>

<script>
import NavbarPage from "@/layout/NavbarPage.vue";
export default {
  name: "reg",
  data() {
    // 检查用户账户是否可以注册
    const checkUsername = (value) => {
      // 发起请求
      console.log(value);
      // return new Promise(async (resolve, reject) => {
      //   this.$request
      //     .post("/users/register", 
      //          value)
      //     .then(({ data }) => {
      //       resolve(data.code === 200);
      //     })
      //     .catch(() => {
      //       rejeck(false);
      //     });
      // });

        // this.$request.post('/users/register',value).then((res)=>{
        //   console.log("res",res);
        // })


      
    };
    return {
      username: "",
      password: "",
      show: "",
      // rejeck:"",
      rules: {
        username: [
          { required: true, message: "请填写用户名" },
          {
            validator: checkUsername,
            // pattern:"/^[\D][\W]{4,11}$/",
            message: "用户名已存在",
          },
        ],
        password: [{ required: true, message: "请填写密码" }],
      },
    };
  },

  components: {
    NavbarPage,
  },

  methods: {
    async onSubmit(values) {
      console.log("submit", values);
      //  注册方法
      const backBata = await this.$request.post("/users/register", values);
      
      console.log(backBata);

      if (backBata.data.code === 200) {
        this.$router.replace({
          path: "/loginy",
          query: {
            username: values.username,
          },
        });
      } else {
        this.$toast("注册失败");
      }
    },
    goto() {
      this.$router.push("/login");
    },
    // onSubmit(value){
    //   this.$request.post('/users/register',value).then((res)=>{
    //       console.log("res",res);
    //     })
    // }
  },
  created() {
    // console.log("Login", this);
    this.$parent.showTabbar = false;
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  margin: auto;
  width: 300px;
  height: 420px;
  background-color: #fff;
   text-align: center;
  padding: 20px;
}

.btn1 {
  padding-left:10px ;
  margin-left: 25px;
  width: 102px;
  background-color: #b4b6b6;
  color: #fff;
}
h2{
  text-align: center;
}

h3 {
  padding: 3px;
  text-align: center;
}

</style>